<template>
  <a-spin :spinning="loading">
    <a-form @submit="handleSubmit" :form="form">
      <a-row :gutter="16">
        <a-col>
          <a-form-item
            label="文章标题"
            :labelCol="{sm: {span: 3}}"
            :wrapperCol="{sm: {span: 21}, xl: {span: 20}, xxl: {span: 18}}">
            <a-input
              v-decorator="[
                'title',
                {rules: [{ required: true, message: '请输入标题' }]}
              ]"
              name="title"
              placeholder="文章标题" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :xl="10" :xxl="9">
          <a-form-item
            label="文章分类"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-select
              v-decorator="['category_id', {rules: [{ required: true, message: '请选择文章分类'}]}]">
              <a-select-option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="浏览次数"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input-number v-decorator="['views']" :min="0" />
          </a-form-item>
          <a-form-item
            label="分享次数"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input-number v-decorator="['share']" :min="0" />
          </a-form-item>
          <a-form-item
            label="目标公开"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :required="false"
          >
            <a-radio-group v-decorator="['is_private', { initialValue: 0 }]">
              <a-radio :value="0">公开</a-radio>
              <a-radio :value="1">不公开</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="文章标签"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol">
            <a-select
              mode="tags"
              :showSearch="true"
              placeholder="文章标签tags"
              name="tags"
              :tokenSeparators="[',']"
              v-decorator="['tags', {rules: [{ required: false }]}]"
            >
              <a-select-option v-for="tag in articleTags" :key="tag.id" :value="tag.name">
                {{ tag.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="文章摘要"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol">
            <a-textarea
              rows="12"
              placeholder="文章的摘要，预览"
              name="abstract"
              v-decorator="['abstract', {rules: [{ required: false }]}]" />
          </a-form-item>
          <a-form-item
            :wrapperCol="{ span: 24 }"
            style="text-align: center"
          >
            <a-button htmlType="submit" type="primary">保存</a-button>
          </a-form-item>
        </a-col>
        <a-col :md="12" :xl="14" :xxl="12">
          <a-form-item
            label="文章内容"
            :labelCol="{ span: 24 }"
            :wrapperCol="{ span: 24 }">
            <v-md-editor
              v-decorator="['content', {initialValue: '', rules: [{ required: true, message: '文章内容不能为空！' }]}]"
              height="640px"
            >
            </v-md-editor>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'BlogArticle',
  props: {
    article: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      labelCol: {
        sm: { span: 6 }
      },
      wrapperCol: {
        xxl: { span: 16 },
        xl: { span: 17 },
        sm: { span: 18 }
      },
      form: this.$form.createForm(this)
    }
  },
  computed: {
    ...mapState({
      categories: state => state.blog.categories,
      articleTags: state => state.blog.tags
    })
  },
  methods: {
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('submit', values, e)
        }
      })
      return false
    }
  },
  watch: {
    article () {
      this.form.setFieldsValue({
        title: this.article.title || '',
        content: this.article.content || '',
        category_id: this.article.category_id || 0,
        views: this.article.views || 0,
        share: this.article.share || 0,
        is_private: this.article.is_private || 0,
        abstract: this.article.abstract || '',
        tags: (this.article.tags || []).map(tag => tag.name)
      })
    }
  }
}
</script>
